<template>
	<up-scroll-list
		title-t="app.feed"
		icon="home2"
		:total="list.length"
		see-all
		@see-all="$router.push('/feed')">
		<up-feed-item v-for="item in list" :key="item.id" :data="item" class="mt-group-b" />
	</up-scroll-list>
</template>

<script lang="ts" setup>
import { watch, computed } from 'vue'
import { UpScrollList, UpFeedItem } from '@/components/up'
import { useAppStore, useFeedStore } from '@/store'
import { getFeedsListFilter } from '@/api/feed'
import { useRequest } from '@/hooks'
import { FeedType } from '@/types'

const appStore = useAppStore()
const feedStore = useFeedStore()

const { run, list } = useRequest<FeedType>(getFeedsListFilter, {
	pageSize: 4,
	onSuccess: () => {
		feedStore.setList(list.value)
	}
})

const pramas = computed(() => ({
	regionCode: appStore.region,
	oddsStyle: appStore.odds,
	locale: appStore.lang,
	currency: appStore.currency,
	orderBy: 'created_at',
	hideLive: false,
	convMarket: true,
	usefilterdefault: true
}))

watch(
	pramas,
	(val) => {
		run(val, {
			refresh: true
		})
	},
	{
		immediate: true
	}
)
</script>
